<template>
	<view class="user-detail">
		<template v-if="globalJSON && userDetail">
			<view class="clickReturnButton" @click="clickReturnButton">
				<text class="iconfont icon-shouye"></text>
			</view>
			<view class="top-banner" v-if="userDetail.banner">
				<image :src="userDetail.banner" mode="widthFix"></image>
			</view>
			<view class="top-banner" v-else>
				<image :src="globalJSON.userBackgroundImage" mode="widthFix"></image>
			</view>
			<view class="user-correlation">
				<view class="user-correlation-top">
					<view class="user-correlation-top-avatar">
						<image :src="userDetail.avatar" mode="widthFix"></image>
					</view>
					<view class="user-correlation-top-info">
						<view class="user-correlation-top-info-box">
							<view class="-for">
								<text class="-for-top">{{userDetail.stats.followerCount}}</text>
								<text class="-for-bottom">粉丝</text>
							</view>
							<view class="-for">
								<text class="-for-top">{{userDetail.stats.postPublishCount}}</text>
								<text class="-for-bottom">帖子</text>
							</view>
							<view class="-for">
								<text class="-for-top">{{userDetail.stats.commentPublishCount}}</text>
								<text class="-for-bottom">回复</text>
							</view>
						</view>
					</view>
				</view>
				<view class="nickname-follow-conversation">
					<view class="-nickname">{{userDetail.nickname}}</view>
					<view class="-follow">
						<view
							@click="clickUserMarkButton('follow')"
							v-if="userDetail.interaction.followStatus">已关注</view>
						<view v-else @click="clickUserMarkButton('follow')">关注</view>
					</view>
					<view class="-conversation">
						<view
							v-if="userDetail.interaction.likeStatus"
							@click="clickUserMarkButton('like')">
							<text class="iconfont icon-good" style="color: #409EFF;"></text>
						</view>
						<view
							v-else
							@click="clickUserMarkButton('like')">
							<text class="iconfont icon-good"></text>
						</view>
					</view>
					<view class="-conversation" @click="cliclConversationButton(userDetail.uid)">
						<view>
							<text class="iconfont icon-pinglun"></text>
						</view>
					</view>
				</view>
				<view class="user-bio">
					{{userDetail.bio?userDetail.bio:'这个家伙，什么都没写！'}}
				</view>
				<view class="user-like">
					<text class="iconfont icon-arrow-up-filling"></text>
					<text>获得 {{userDetail.stats.likerCount+userDetail.stats.postLikeCount+userDetail.stats.commentLikeCount}} 次赞</text>
				</view>
			</view>
			<view class="_tab">
				<view
					@click="clickTabButton(1)"
					:class="tab == 1?'_tab-for _hover':'_tab-for'">
					<text>帖子</text>
				</view>
				<view
					@click="clickTabButton(2)"
					:class="tab == 2?'_tab-for _hover':'_tab-for'">
					<text>回复</text>
				</view>
			</view>
			<template v-if="tab == 1">
				<list-circle
					v-if="postQuery"
					:style="'order:'+postQuery.order+';'"
					:item="postQuery"></list-circle>
			</template>
			<template v-if="tab == 2">
				<list-comment
					v-if="uid"
					:uid="uid"
					:css="'background: #FFF;margin-top: -25rpx;padding-top: 25rpx;'"></list-comment>
			</template>
		</template>
		<template v-else>
			<view style="width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;">
				<global-loading></global-loading>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uid:"",
				globalJSON:null,
				userDetail:null,
				tab:1,
				postQuery:null,
			}
		},
		onShow() {
			
		},
		onLoad(e) {
			this.uid = e.uid;
			this.getGlobalJSON();
		},
		methods: {
			getGlobalJSON(){
				uni.request({
					url:this.$_configFile() + "global.json",
					success: (res) => {
						this.globalJSON = res.data;
						this.getUserDetail();
					}
				})
			},
			getUserDetail(){
				this.$_request(
					"GET",`/api/fresns/v1/user/${this.uid}/detail`,
					{},
					(res) => {
						this.userDetail = res.data.data.detail;
						this.clickTabButton(1);
					}
				)
			},
			clickTabButton(tab){
				this.tab = tab;
				if(this.tab === 1){
					this.postQuery = {
						"order": 0,
						"css": "background: #FFF;padding:0 25rpx;",
						"page": true,
						"query": {
							"users": this.uid,
							"pageSize": 15
						},
						"randomInsertion___": "列表中随机插入",
						"randomInsertion": {
							"status": false,
							"html": ""
						}
					}
				}
				if(this.tab === 2){
					
				}
			},
			// 点击，喜欢按钮
			clickUserMarkButton(type){
				uni.showLoading();
				this.$_request(
					"POST","/api/fresns/v1/user/mark",
					{
						"markType":type,
						"type":"user",
						"fsid":this.uid
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code === 0){
							this.getUserDetail();
						}else{
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 1500
							});
						}
					}
				)
			},
			cliclConversationButton(uid){
				uni.showModal({
					title: '私聊',
					content: '给TA说点什么？',
					confirmText: '发送',
					editable: true,
					success: (res) => {
						let c = res.content;
						if(res.confirm){
							if(!c){
								uni.showToast({
									title: '内容不得为空',
									icon: 'none',
									duration: 1500
								});
								return;
							}
							this.$_request(
								"POST","/api/fresns/v1/conversation/message",
								{
									"uidOrUsername":uid,
									"message": c
								},
								(ref) => {
									if(ref.data.code == 0){
										this.$_to('notification/conversation?uid=' + uid)
									}else{
										uni.showToast({
											title: ref.data.message,
											icon: 'none',
											duration: 1500
										});
									}
								}
							)
						}
					}
				});
			},
			clickReturnButton(){
				uni.switchTab({
					url:"/pages/navigation/diy_1"
				})
			}
		}
	}
</script>

<style lang="scss">
.user-detail{
	.clickReturnButton{
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 40rpx;
		position: absolute;
		top: var(--status-bar-height);
		left: 25rpx;
		z-index: 999;
		background-color:rgba(0,0,0,0.5);
		border-radius: 100rpx;
		text{
			font-size: 40rpx;
			color: #FFF;
		}
	}
	.top-banner{
		width: 100%;
		height: 450rpx;
		overflow: hidden;
		position: relative;
		z-index: 1;
	}
	.user-correlation{
		background: #FFF;
		border-radius: 50rpx 50rpx 0 0;
		padding:0 50rpx 35rpx 50rpx;
		margin-top: -50rpx;
		position: relative;
		z-index: 2;
		.user-correlation-top{
			display: flex;
			.user-correlation-top-avatar{
				border: 5rpx solid #FFF;
				width: 180rpx;
				height: 180rpx;
				border-radius: 1000rpx;
				overflow: hidden;
				margin-top: -60rpx;
				flex-shrink: 0;
			}
			.user-correlation-top-info{
				display: flex;
				align-items: flex-end;
				justify-content: flex-end;
				flex: 1;
				.user-correlation-top-info-box{
					flex: 1;
					margin-left: 50rpx;
					display: flex;
					align-items: center;
					justify-content:space-between;
					height: 120rpx;
					.-for{
						display: flex;
						align-items: center;
						justify-content: center;
						flex-flow: column;
						.-for-top{
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 40rpx;
							line-height: 40rpx;
							padding-bottom: 15rpx;
						}
						.-for-bottom{
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 28rpx;
							line-height: 28rpx;
							color: $placeholder;
						}
					}
				}
			}
		}
		.nickname-follow-conversation{
			display: flex;
			align-items: center;
			height: 70rpx;
			margin-top: 25rpx;
			.-nickname{
				flex: 1;
				font-size: 50rpx;
				line-height: 50rpx;
				font-weight: bold;
			}
			.-follow{
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 70rpx;
				view{
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: $theme;
					color: #FFF;
					font-size: 28rpx;
					line-height: 28rpx;
					padding: 0 50rpx;
					border-radius: 100rpx;
				}
			}
			.-conversation{
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 70rpx;
				margin-left: 25rpx;
				view{
					width: 70rpx;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: $border;
					line-height: 40rpx;
					border-radius: 100rpx;
					text{
						font-size: 40rpx;
					}
				}
			}
		}
		.user-bio{
			font-size: 32rpx;
			line-height: 45rpx;
			margin-top: 25rpx;
			opacity: .6;
		}
		.user-like{
			display: flex;
			align-items: center;
			line-height: 28rpx;
			margin-top: 25rpx;
			text{
				font-size: 28rpx;
				color: $placeholder;
			}
			.iconfont{
				color: $theme;
				padding-right: 10rpx;
			}
		}
	}
	._tab{
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FFF;
		margin-top: 25rpx;
		._tab-for{
			padding: 35rpx 25rpx 25rpx 25rpx;
			line-height: 40rpx;
			text{
				font-size: 40rpx;
				color: $placeholder;
				border-bottom: 3px solid #FFF;
				padding-bottom: 10rpx;
			}
		}
		._hover{
			text{
				color: $primary;
				border-bottom: 3px solid $theme;
			}
		}
	}
}
</style>
